// @ts-nocheck
import {useState, useRef} from 'react';
import {Button, Divider, Popconfirm, message, Spin} from 'antd'
import {PageHeaderWrapper} from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table'
import {authority} from "@/tools/tool";
import {useModel, Access} from 'umi'
import {ImportOutlined, PlusOutlined, QuestionCircleOutlined} from "@ant-design/icons";
import CreateModify from './extra/createModify'
import {queryClient, delClient, downloadClientExample, uploadClient} from '@/services/client'
import CreateContract from "@/pages/Business/Contract/extra/createContract";
import ExcelData from "@/components/Common/ExcelData";

const Index = () => {
  const actionRef = useRef()
  const keys = ['联系人', '手机号', '套餐', '开始时间', '结束时间', '装维人员', '详细地址', '宽带账号', '宽带密码', '身份证', '光猫码', '备注']
  const init = useModel('@@initialState');
  const [mode, setMode] = useState('create')
  const [visible, setVisible] = useState<boolean>(false)
  const [addVisible, setAddVisible] = useState<boolean>(false)
  const [data, setData] = useState({})
  const [importVisible, setImport] = useState(false)
  const [loading, setLoading] = useState(false)
  const {currentUser} = init.initialState
  const delClientData = (id: any) => {
    message.warn('正在删除').then()
    delClient({clientId: id}).then(res => {
      if (res.status === 200) {
        actionRef.current.reload()
        message.success(res.message).then()
      } else {
        message.error(res.message).then()
      }
    })
  }
  const columns = [
    {
      title: '客户名称',
      dataIndex: 'name',
      width:200,
      ellipsis: true,
    },
    {
      title: '电话',
      dataIndex: 'telephone'
    },
    {
      title: '通信地址',
      dataIndex: 'install_address',
      width:300,
      ellipsis: true,
    },
    {
      title: '开户时间',
      dataIndex: 'create_date',
      hideInSearch: true,
      valueType: 'dateTime',
      width:200,
      ellipsis: true,
    },
    {
      title: '操作',
      fixed: 'right',
      valueType: 'option',
      width: 300,
      render: (_: any, row: any) => [
        <Access key={'7'} accessible={authority('14', currentUser.operation)}>
          <a onClick={() => {
            setAddVisible(true);
            setData(row)
          }}>业务办理</a>
        </Access>,
        <Divider key={'4'} type="vertical"/>,
        <Access key={'3'} accessible={authority('12', currentUser.operation)}>
          <a onClick={() => {
            setMode('modify');
            setVisible(true);
            setData(row)
          }}>
            修改
          </a>
        </Access>,
        <Divider key={'1'} type="vertical"/>,
        <Access key={'5'} accessible={authority('13', currentUser.operation)}>
          <Popconfirm title="是否删除当前客户？" icon={<QuestionCircleOutlined style={{color: 'red'}}/>}
                      onConfirm={() => {
                        delClientData(row.client_id)
                      }}>
            <a href="#">删除</a>
          </Popconfirm>
        </Access>
      ]
    }
  ]
  const download = () => {
    // @ts-ignore
    downloadClientExample().then(res => {
      const blob = new Blob([res], {type: 'application/vnd.ms-excel;charset=utf-8'});
      const a = document.createElement('a');
      a.href = window.URL.createObjectURL(blob)
      a.download = decodeURIComponent(`客户导入样例.xls`);
      document.body.appendChild(a);
      a.click();
      message.success('下载成功').then()
    })
  }
  const handleImport = (e) => {
    setLoading(true)
    uploadClient({list: e}).then(res => {
      if (res.status === 200) {
        message.success(res.message).then()
        setLoading(false)
        setImport(false)
        actionRef.current.reload()
      } else {
        setLoading(false)
        message.error('导入失败!').then()
      }
    })

  }

  return (
    <PageHeaderWrapper>
      <ProTable
        actionRef={actionRef}
        columns={columns}
        request={((params) => queryClient(params))}
        toolBarRender={() => [
          <a key={'1'} onClick={() => download()}>下载样例</a>,
          <Access key={'1'} accessible={authority('66', currentUser.operation)}>
            <Popconfirm title={() => <>导入前,请依照下载样例<br/>进行填写。</>} onConfirm={() => {
              setImport(true)
            }}>
              <Button icon={<ImportOutlined/>} type="primary">导入客户信息</Button>
            </Popconfirm>
          </Access>,
          <Access key={'1'} accessible={authority('11', currentUser.operation)}>
            <Button key="button" icon={<PlusOutlined/>} type="primary" onClick={() => {
              setVisible(true);
              setMode('create')
            }}>
              新增客户
            </Button>
          </Access>
        ]}
      />
      <CreateModify
        visible={visible}
        mode={mode}
        data={data}
        onClose={() => {
          setVisible(false);
          actionRef.current.reload();
          setData({})
        }}
        onOk={() => {
          setVisible(false);
          actionRef.current.reload();
          setData({})
        }}
      />
      <CreateContract
        visible={addVisible}
        onOk={() => {
          setAddVisible(false);
          setData({})
        }}
        onClose={() => {
          setAddVisible(false);
          setData({})
        }}
        data={data}
      />
      <Spin tip="导入中..." spinning={loading}>
        <ExcelData
          keyList={keys}
          visible={importVisible}
          onClose={() => setImport(false)}
          onOk={(e) => handleImport(e)}
        />
      </Spin>
    </PageHeaderWrapper>
  );
};

export default Index;
